import classNames from 'classnames'

interface IconProps {
  // 要显示的字体图标的名字
  name: string
  // 自定义class样式类
  className?: string
  // 点击事件监听函数
  onClick?: () => void
  // 推荐频道不能删
  channel?: string
}

const Icon = ({ className, onClick, name, channel }: IconProps) => {
  return (
    <svg
      // 添加外面传入的自定义样式类
      className={classNames('icon', className)}
      // 残障人士设备专用属性
      aria-hidden="true"
      // 添加点击事件监听
      onClick={onClick}
      style={{ display: channel === '推荐' ? 'none' : '' }}
    >
      {/* #后的名称就是字体图标名称，替换成你想要的图标 */}
      <use xlinkHref={`#${name}`}></use>
    </svg>
  )
}

export default Icon
